<template>
    <div class="app-container">
        <van-loading size="24px" vertical v-if="!loading">加载中...</van-loading>
        <div class="layout-content" v-else>
            <div class="layout-cheader">
                <form action="/">
                    <van-search v-model="searchText" placeholder="请输入搜索标题" @search="onSearch" />
                </form>
                <van-tabs v-model="active" @click="tabClick">
                    <van-tab v-for="(item, index) in list" :title="item.title" :key="index">
                    </van-tab>
                </van-tabs>
                <DataList ref="DataList" :queryParam="queryParam" :url="url.list">
                    <template v-slot:scopeData="scopeData">
                        <div class="cell_class" @click="goTaskDetail(scopeData.item)">
                            <div class="cell_header">
                                <h5>
                                    <div>{{ scopeData.item.itemName }}</div>
                                </h5>
                                <p>
                                    <span class="circular" :style="`background:${scopeData.item.state_dictText == '已结束'
                                        ? 'orange'
                                        : '#448ef7'
                                        }`"></span>
                                    <!-- 待办事项 -->
                                    <span v-if="scopeData.item.state_dictText">{{
                                        scopeData.item.state_dictText
                                    }}</span>
                                    <!-- 已办事项 -->
                                </p>
                            </div>
                            <div class="cell_content">
                                <p>
                                    <span>任务下发人:{{ scopeData.item.assigner_dictText }}</span>
                                </p>
                                <p>
                                    <span>任务分配时间:{{ scopeData.item.createTime }}</span>
                                </p>
                            </div>
                        </div>
                    </template>
                </DataList>
            </div>
        </div>
        <div class="layout-footer">
            <TabBar :activeTab="1"></TabBar>
        </div>
    </div>
</template>

<script>
import TabBar from "@/components/TabBar";
import DataList from "../components/DataList";
import { ajaxGetDictItems } from "@/api/api";
export default {
    data () {
        return {
            active: 0,
            searchText: "",
            loading: false,
            list: [{ title: "全部", type: "" }],
            url: {
                list: "lims/limsProject/planListByMyself",
            },
            queryParam: {
                itemName: "",
                relationName: "",
                account: this.$store.getters.userInfo.username,
                projectState: "",
            },
        };
    },
    async created () {
        console.log(this.$store.getters.userInfo);

        this.loading = await this.getajaxGetDictItems();
    },
    methods: {
        //跳转任务详情
        goTaskDetail (record) {
            console.log(record);
            this.$router.push({
                path: "/taskDetail",
                query: { id: record.projectId },
            });
        },
        //优先获取字典值
        getajaxGetDictItems () {
            return new Promise((resolve, reject) => {
                ajaxGetDictItems("project_item_state", null).then((res) => {
                    if (res.success) {
                        console.log(res.result);
                        res.result.map((item) => {
                            let arr = ["未开始", "已开始", "已结束"];
                            if (arr.some((ite) => ite === item.label)) {
                                this.list.push({
                                    title: item.title,
                                    type: item.value,
                                });
                            }
                        });
                        console.log(this.list);
                        resolve(true);
                        // this.dictOptions = res.result;
                    } else {
                        reject(res.message);
                    }
                });
            });
        },
        tabClick (name, title) {
            console.log(name);
            console.log(title);
            this.list[name];
            // alert(111);
            // if (this.list[name].type == "") {
            //   delete this.queryParam.projectState;
            // } else {
            this.queryParam.projectState = this.list[name].type;
            // }
            console.log(this.queryParam);
        },
        onSearch (val) {
            this.queryParam.itemName = val;
            console.log(this.queryParam);
        },
    },
    components: {
        TabBar,
        DataList,
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    height: 100%;

    .van-loading {
        margin-top: 100px;
    }
}

.layout-content {
    background-color: #f5f5f5;
    height: 100%;
}

.layout-content {
    .cell_class {
        font-size: 14px;
        box-sizing: border-box;
        padding: 15px;
        background-color: #fff;
        margin-bottom: 10px;

        .cell_header {
            display: flex;
            justify-content: space-between;

            h5 {
                font-size: 16px;
                color: #1e80ff;
                margin: 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                flex: 1;
            }

            p {
                width: 100px;
                text-align: center;
                margin: 0;

                .circular {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    display: inline-block;
                    background-color: #1e80ff;
                    vertical-align: middle;
                    margin-right: 5px;
                }

                span {
                    font-size: 14px;
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>
